<!--
 * @Author: your name
 * @Date: 2020-09-21 07:44:10
 * @LastEditTime: 2021-01-25 09:50:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \supplyweb\src\components\header\index.vue
-->
<!--  -->
<template>
  <div
    class="header_containt clearfix"
    :style="IsHome ? 'position: absolute' : 'position: relative'"
  >
    <!-- 首页top -->
    <div v-if="IsHome" class="top_bar pt-15">
      <div class="wh-1200 auto">
        <div class="flex">
          <div class="flex-1 tips-title">
            您好，欢迎使用企业供需精准对接服务
          </div>
          <div class="sign-btn-box">
            <span v-if="Islogin" @click="toCenter" class="login-btn"
              >用户中心</span
            >
            <span v-if="Islogin" class="line"></span>
            <span v-if="Islogin" class="login-btn" @click="LoginOut">退出</span>
            <span v-if="!Islogin" class="login-btn" @click="ToLoginPage"
              >登录</span
            >
            <!-- <span v-if="!Islogin" class="line"></span> -->
            <!-- <span v-if="!Islogin" class="register-btn">注册</span> -->
          </div>
        </div>
        <div class="flex mt-15">
          <div class="flex-1">
            <router-link to="/">
              <img class="logo-img" src="@/assets/images/logo.png" alt />
            </router-link>
          </div>
          <div class="search-box clearfix">
            <a-select
              class="f-left"
              size="large"
              v-model="productCatpory"
              style="width: 80px"
              :showArrow="true"
            >
              <icon-font slot="suffixIcon" type="icon-down" />
              <a-select-option
                v-for="item in productCatporyList"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>

            <a-input
              v-model="KeywordsText"
              size="large"
              placeholder
              class="f-left search_input"
              style="width: 196px"
            >
              <icon-font
                class="search-btn"
                slot="suffix"
                type="icon-sousuo"
                @click="SearchKeywords"
              />
            </a-input>
          </div>
        </div>
      </div>
    </div>

    <div v-if="!IsHome" class="other_top_bar">
      <div class="flex">
        <div class="flex-1">
          <router-link to="/">
            <img src="@/assets/images/logo.png" alt />
          </router-link>
        </div>
        <div class="tr r-main">
          <div>
            <div class="search-box f-left mt-20 clearfix">
              <a-select
                class="f-left"
                size="large"
                v-model="productCatpory"
                style="width: 80px"
                :showArrow="true"
              >
                <icon-font slot="suffixIcon" type="icon-down" />
                <a-select-option
                  v-for="item in productCatporyList"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.label }}</a-select-option
                >
              </a-select>

              <a-input
                v-model="KeywordsText"
                size="large"
                placeholder
                class="f-left search_input"
                style="width: 196px"
              >
                <icon-font
                  class="search-btn"
                  slot="suffix"
                  type="icon-sousuo"
                  @click="SearchKeywords"
                />
              </a-input>
            </div>
            <router-link v-if="Islogin" class="login" to="/usercenter/user"
              >用户中心</router-link
            >
            <a-button
              v-if="Islogin"
              type="primary"
              @click="LoginOut"
              class="register"
              >退出</a-button
            >
            <span v-if="!Islogin" class="login" @click="ToLoginPage">登录</span>
            <!-- <a-button v-if="!Islogin" type="primary" class="register">注 册</a-button> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 导航menu -->
    <div :class="IsHome ? 'ment-list home' : 'ment-list other'">
      <div class="wh-1200 auto">
        <a-menu mode="horizontal" :selectedKeys="routerpath">
          <a-menu-item :key="'/home'">
            <router-link to="/home">
              <span>首页</span>
            </router-link>
          </a-menu-item>
          <a-menu-item :key="'/ProductProvide'">
            <router-link to="ProductProvide">
              <span>产品供应</span>
            </router-link>
          </a-menu-item>
          <a-menu-item :key="'/MaterialDemand'">
            <router-link to="MaterialDemand">
              <span>产品需求</span>
            </router-link>
          </a-menu-item>
          <a-menu-item :key="'/programmelist'">
            <router-link to="programmelist">
              <span>解决方案</span>
            </router-link>
          </a-menu-item>
          <a-menu-item :key="'/entIndex'">
            <router-link to="entIndex">
              <span>企 业</span>
            </router-link>
          </a-menu-item>
          <a-menu-item :key="'/Policy'">
            <router-link to="/Policy">
              <span>政策服务</span>
            </router-link>
          </a-menu-item>
          <a-menu-item :key="'/AttractInvestment'">
            <!-- <router-link to="AttractInvestment"> -->
            <a @click="toCredit"><span>信贷金融</span></a>

            <!-- </router-link> -->
          </a-menu-item>
          <!-- <a-menu-item :key="'/InviteBidding'">
            <router-link to="InviteBidding">
              <span>招标公告</span>
            </router-link>
          </a-menu-item> -->

          <a-menu-item :key="'/Notice'">
            <router-link to="/Notice">
              <span>通知公告</span>
            </router-link>
          </a-menu-item>
        </a-menu>
      </div>
    </div>
    <!-- 感兴趣的行业弹框 -->
    <a-modal
      :centered="true"
      title="请选择您感兴趣的行业"
      cancelText="取消"
      okText="提交"
      :width="603"
      :closable="false"
      :visible="Loginmodelvisible"
      @ok="handleOk"
      wrapClassName="industrymode"
      @cancel="handleCancel"
    >
      <h2 class="tc login_title">登录</h2>
      <div class="model_containt">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="账号" prop="userName">
            <a-input v-model="form.userName" />
          </a-form-model-item>

          <a-form-model-item label="密码" prop="userPassword">
            <a-input type="password" v-model="form.userPassword" />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>

    <div id="leftsead" v-if="scrollTop > 400">
      <ul>
        <li
          @click="JumpUseCenter('/usercenter/ProductsRelease')"
          class="mb-16 leftsead_main_1"
        >
          <a class="clearfix"><i class="iconfont icon-chanpin"></i></a>
        </li>
        <li
          @click="JumpUseCenter('/usercenter/RequirementRelease')"
          class="mb-16 leftsead_main_2"
        >
          <a class="clearfix"><i class="iconfont icon-shenqingguanli"></i></a>
        </li>
        <li @click="toPath('/feedback')" class="mb-16 leftsead_main_4">
          <a class="clearfix"><i class="iconfont icon-liuyan"></i></a>
        </li>
        <li @click="backtop" class="leftsead_main_3">
          <a class="clearfix"><i class="iconfont icon-fanhuidingbu"></i></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Icon } from "ant-design-vue";
import axios from "axios";
import { Login, GetLogout, LogOutAccessToken } from "@/apis/user";
import {
  setToken,
  getToken,
  setIsSign,
  removeToken,
  removeCookies,
  getCookiesUserInfo,
} from "@/utils/auth"; // get token from cookie
import { isLogin } from "@/utils";
import { getEntBaseInfo } from "@/apis/user/EntBaseInfo";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2056587_9swle2zinfa.js",
});
import store from "@/store";
// 后台用
import { getCompaynInfo } from "@/apis/com/company";
import { clickModule } from "@/apis/system/index";

export default {
  data() {
    return {
      EntInfo: {},
      scrollTop: 0,
      KeywordsText: "",
      Islogin: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      other: "",
      form: {
        userName: "",
        userPassword: "",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        userPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      Loginmodelvisible: false,
      IsHome: true,
      productCatpory: "/ProductProvide",
      productCatporyList: [
        {
          label: "产品",
          value: "/ProductProvide",
        },
        {
          label: "需求",
          value: "/MaterialDemand",
        },
        {
          label: "企业",
          value: "/entIndex",
        },
      ],
      productkeywords: "",
      MenuList: [
        {
          title: "首 页",
          path: "/home",
          redirect: "/home",
        },
        {
          title: "产品供应",
          path: "/ProductProvide",
        },
        {
          title: "产品供应详情",
          path: "/ProductContent",
          ishiddle: true,
          redirect: "/ProductProvide",
        },
      ],
    };
  },

  components: {
    IconFont,
  },

  computed: {
    routerpath() {
      return this.$route.meta.guidePath
        ? [this.$route.meta.jumpPath]
        : [this.$route.path];
    },
    f1() {
      return this.$store.state.TokenValue;
    },
  },
  watch: {
    f1(curVal, oldVal) {
      if (curVal) {
        this.Islogin = true;
      } else {
        this.Islogin = false;
      }
      //这里的curVal就是需要监听的值
    },
    $route(to, from) {
      if (this.$route.path == "/home") {
        this.IsHome = true;
      } else {
        this.IsHome = false;
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showbtn, true);
  },

  methods: {
    GetGolborredirectUrl() {
      const FULL_CHARTER =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopgrstuvwxyz";
      let state = "";
      for (let i = 0; i < 6; i++) {
        state += FULL_CHARTER[Math.floor(Math.random() * 52)];
      }

      let GolborredirectUrl =
        GolbUrl.uaaUri +
        "/oauth/authorize?client_id=" +
        // "/auth/loginPortal?client_id=" +
        GolbUrl._clientId_ +
        "&redirect_uri=" +
        GolbUrl.redirect_uri +
        "&response_type=code&state=" +
        state +
        "&userType=2";
      console.log(GolborredirectUrl);
      // console.log(GolborredirectUrl)
      return GolborredirectUrl;
    },

    ToLoginPage() {
      const url = "/login";
      this.$router.push(url);
    },

    GetLogin() {
      let that = this;
      if (!getToken()) {
        // store.dispatch("GetUserInfo");
        this.$confirm({
          okText: "登录",
          cancelText: "取消",
          title: "您需要登录再进行该操作",
          onOk() {
            // that.GetGolborredirectUrl()
            // that.GetGolborredirectUrl()
            window.location.href = that.GetGolborredirectUrl();
          },
          onCancel() {},
        });
        // this.$message.warning("您需要登录再进行该操作");
        return;
      }
    },
    getEntBaseInfo() {
      getEntBaseInfo()
        .then((res) => {
          if (res.code == 200) {
            this.EntInfo = res.data;
          }
        })
        .catch((error) => {});
    },
    // 显示回到顶部按钮
    showbtn() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
    },
    /**
     * 回到顶部功能实现过程：
     * 1. 获取页面当前距离顶部的滚动距离（虽然IE不常用了，但还是需要考虑一下兼容性的）
     * 2. 计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是做一个减法
     * 3. 用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
     * 4. 最后记得在移动到顶部时，清除定时器
     */
    backtop() {
      var timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 10);
    },
    toPath(url) {
      this.$router.push(url);
    },
    JumpUseCenter(url) {
      isLogin().then(() => {
        let _IsSing = this.EntInfo.isSign;
        if (true) {
          this.$router.push(url);
        } else {
          this.$store.commit("setIsSign", true);
        }
      });
      // else {
      //   this.$router.push(url);
      // }
    },
    handleOk() {
      let that = this;
      that.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let account = that.form.userName;
          setToken(account);
          this.$store.commit("VuexSetTokenValue", account);
          that.$message.success("登录成功");
          that.Loginmodelvisible = false;
          setTimeout(() => {
            location.reload();
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 退出登录
    LoginOut() {
      let _this = this;
      _this.$confirm({
        title: "您确定要退出吗?",
        content: "",
        onOk() {
          let prefix = GolbUrl.uaaUri;
          let accessToken = getToken();
          removeToken();
          removeCookies();
          store.state.TokenValue = "";
          localStorage.removeItem("LH_WEB_TOKEN");
          // localStorage.removeItem("LH_WEB_CODE");
          _this.Islogin = false;
          _this.$router.push("/");
          location.reload();
          let logoutUrl =
            prefix +
            "/oauth/remove/token?access_token=" +
            accessToken +
            "&redirect_uri=" +
            GolbUrl.redirect_uri;
          window.location.href = logoutUrl;
          //  setTimeout(() => {
          //   removeToken();
          // removeCookies();
          // store.state.TokenValue = "";
          // localStorage.removeItem("LH_WEB_TOKEN");
          // localStorage.removeItem("LH_WEB_CODE");
          // _this.Islogin = false;

          //  }, 50);
        },
        onCancel() {},
      });
    },
    handleCancel() {
      this.Loginmodelvisible = false;
    },
    SearchKeywords() {
      this.$router.push({
        path: this.productCatpory,
        query: { keywords: this.KeywordsText, time: new Date().valueOf() },
      });
      this.KeywordsText = "";
    },
    async toCenter() {
      // 获取企业当前状态
      const id = JSON.parse(getCookiesUserInfo()).companyId;
      let res = await getCompaynInfo(id);
      // 如果没有完善信息
      if (res.code == 200 && res.data) {
        if (res.data.approvalSt === null) {
          this.toPath("/usercenter/reviseInformation");
        } else if (res.data.approvalSt === 0) {
          this.toPath("/usercenter/BaseInformation");
        } else {
          this.toPath("/usercenter/user");
        }
      }
    },
    //跳转信贷金融主菜单，并记录模块点击记录
    toCredit() {
      this.toPath("/AttractInvestment");
      clickModule("3", "信贷金融主菜单");
    },
  },
  created() {
    console.log(getToken(), "getToken");
    if (getToken()) {
      this.Islogin = true;
      this.getEntBaseInfo();
    } else {
      this.Islogin = false;
    }
    if (this.$route.path == "/home") {
      this.IsHome = true;
    } else {
      this.IsHome = false;
    }
  },
};
</script>
<style lang="less" scoped>
.header_containt {
  width: 100%;
  background-color: @bg-color-f0f;
  position: absolute;
  top: 0;
  left: 0;

  .top_bar {
    width: 100%;
    background-color: #002aca;
    color: @text-color-fff;

    a {
      color: @text-color-fff;
    }

    .tips-title {
      color: @text-color-fff;
      font-size: @font14;
    }

    .sign-btn-box {
      font-size: @font14;
      color: @text-color-fff;

      .login-btn {
        cursor: pointer;
        margin-left: 10px;
      }

      .line {
        height: 14px;
        width: 1px;
        display: inline-block;
        background-color: #ffffff;
        vertical-align: middle;
        margin: 0 10px;
      }

      .register-btn {
        cursor: pointer;
      }
    }

    .logo-img {
      height: 46px;
    }
  }

  // 其他页面
  .other_top_bar {
    height: 80px;
    background-color: @color-2A5;
    line-height: 80px;

    img {
      height: 39px;
      margin-left: 118px;
    }

    .r-main {
      margin-right: 118px;

      .login {
        width: 100px;
        line-height: 40px;
        height: 40px;
        color: @text-color-fff;
        text-align: center;
        display: inline-block;
        cursor: pointer;
      }

      .register {
        width: 100px;
        line-height: 40px;
        height: 40px;
      }
    }
  }

  .ment-list {
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
  }

  // 首页导航样式
  .home {
    // background-color: transparent;
    background-color: #002aca;
    margin: -2px;

    // background: rgba(24, 138, 241, 0);
    ::v-deep .ant-menu {
      background-color: transparent !important;
      background: transparent !important;
    }

    .ant-menu-horizontal {
      border: 0px solid #ddd;

      a {
        font-size: @font18;
        color: @bg-color-f5f;
      }
    }

    ::v-deep .ant-menu-item {
      padding: 0 32px;
      height: 60px;
      line-height: 60px;
    }

    ::v-deep .ant-menu-item-selected {
      position: relative;
      border-bottom: 0px solid #1890ff !important;

      &::before {
        width: 33px;
        height: 4px;
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: @bg-color-f5f;
      }

      a {
        font-weight: bold;
        color: @bg-color-f5f;
      }
    }

    ::v-deep .ant-menu-horizontal > .ant-menu-item,
    .ant-menu-horizontal > .ant-menu-submenu {
      border-bottom: 0px solid #1890ff !important;
    }

    ::v-deep .ant-menu-horizontal > .ant-menu-item:hover,
    .ant-menu-horizontal > .ant-menu-submenu:hover,
    .ant-menu-horizontal > .ant-menu-item-active,
    .ant-menu-horizontal > .ant-menu-submenu-active,
    .ant-menu-horizontal > .ant-menu-item-open,
    .ant-menu-horizontal > .ant-menu-submenu-open,
    .ant-menu-horizontal > .ant-menu-item-selected,
    .ant-menu-horizontal > .ant-menu-submenu-selected {
      border-bottom: 0px solid #1890ff !important;

      &::before {
        width: 33px;
        height: 4px;
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: @bg-color-f5f;
      }

      a {
        color: @bg-color-f5f;
        font-weight: bold;
      }
    }
  }

  //其他页面导航样式
  .other {
    .ant-menu-horizontal {
      border: 0px solid #ddd;

      a {
        font-size: @font18;
        color: @text-color-606;
      }
    }

    ::v-deep .ant-menu-item {
      padding: 0 32px;
      height: 60px;
      line-height: 60px;
    }

    ::v-deep .ant-menu-item-selected {
      position: relative;
      border-bottom: 0px solid #1890ff !important;

      &::before {
        width: 33px;
        height: 4px;
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: @color-2A5;
      }

      a {
        font-weight: bold;
        color: @color-2A5;
      }
    }

    ::v-deep .ant-menu-horizontal > .ant-menu-item,
    .ant-menu-horizontal > .ant-menu-submenu {
      border-bottom: 0px solid #1890ff !important;
    }

    ::v-deep .ant-menu-horizontal > .ant-menu-item:hover,
    .ant-menu-horizontal > .ant-menu-submenu:hover,
    .ant-menu-horizontal > .ant-menu-item-active,
    .ant-menu-horizontal > .ant-menu-submenu-active,
    .ant-menu-horizontal > .ant-menu-item-open,
    .ant-menu-horizontal > .ant-menu-submenu-open,
    .ant-menu-horizontal > .ant-menu-item-selected,
    .ant-menu-horizontal > .ant-menu-submenu-selected {
      border-bottom: 0px solid #1890ff !important;

      &::before {
        width: 33px;
        height: 4px;
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: @color-2A5;
      }

      a {
        color: @color-2A5;
        font-weight: bold;
      }
    }
  }
}

.search-box {
  width: 276px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 4px;

  .search-btn {
    cursor: pointer;
    font-size: 18px;
    margin-right: 5px;
  }

  ::v-deep .ant-select-selection--single {
    height: 40px;
  }

  ::v-deep .ant-select-selection {
    border: 0px solid #ddd;
    font-size: @font14;
  }

  ::v-deep .ant-select-selection__rendered {
    height: 40px;
    line-height: 40px;
  }

  .search_input {
  }
}

::v-deep .ant-modal-content {
  border-radius: 32px;
  border: solid 6px #188af1;
}

::v-deep .ant-modal-header {
  height: 60px;
  background-color: #2a51bc;
  border-radius: 24px 24px 0px 0px;
  text-align: center;
  display: none;
}

::v-deep .ant-modal-title {
  color: #fff;
  font-size: @font26;
}

::v-deep .ant-modal-footer {
  margin: 0 24px;
  border-top: 0px solid #e8e8e8;
}

// 下拉框 图标
::v-deep .ant-select-arrow {
  top: 50%;
  right: 11px;
  color: #909399;
  font-size: 12px;
  line-height: 1;
  transform-origin: 50% 50%;
  font-size: 12px;
}

.search-box {
  ::v-deep .ant-input {
    border: 0px solid #ddd;
  }
}

::v-deep .ant-input:focus {
  box-shadow: 0 0 0 0px rgba(24, 138, 241, 0.2);
}

// 弹窗
.industrymode {
  ::v-deep .ant-input {
    border: 1px solid #ddd !important;
  }

  ::v-deep .ant-select-arrow {
    top: 50%;
    right: 11px;
    color: #909399;
    font-size: 12px;
    line-height: 1;
    transform-origin: 50% 50%;
    font-size: 12px;
  }

  ::v-deep .ant-input {
    border: 1px solid #ddd;
  }

  ::v-deep .ant-input:focus {
    box-shadow: 0 0 0 0px rgba(24, 138, 241, 0.2);
  }

  .login_title {
    font-size: 24px;
  }

  .model_containt {
    padding: 30px 60px;
    font-size: 18px;
    letter-spacing: 0px;
    color: #909399;
    position: relative;
  }

  .person {
    width: 220px;
    height: 464px;
    background-size: 220px 464px;
    background-repeat: no-repeat;
    position: absolute;
    right: -140px;
    top: -80px;
  }

  .more {
    height: 59px;
    line-height: 59px;
    padding-left: 60px;
    background-color: #f3f6fe;

    .num {
      color: #188af1;
    }
  }

  .top_title {
    font-size: 36px;
    color: #303133;
  }

  .tips_title {
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0px;
    color: #c0c4cc;
    margin-top: 20px;
  }

  .industrymode_list {
    margin-top: 30px;

    .item_industrymode {
      width: 120px;
      height: 48px;
      background-color: #ffffff;
      border-radius: 24px;
      border: solid 1px #dcdfe6;
      display: inline-block;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #909399;
      margin-top: 32px;
      margin-right: 30px;
      cursor: pointer;

      &:nth-child(5n) {
        margin-right: 0;
      }
    }

    .item_industrymode_active {
      width: 120px;
      height: 48px;
      background-color: #2a51bc;
      border-radius: 24px;
      display: inline-block;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #ffffff;
      margin-top: 32px;
      margin-right: 30px;

      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}

/* leftsead */

#leftsead {
  position: fixed;
  top: 400px;
  width: 60px;
  right: 0px;
  z-index: 9999999;

  .leftsead_main_1 {
    width: 60px;
    position: relative;
    margin-right: 20px;

    &:hover {
      width: 120px;
      margin-right: 0px;
      border-radius: 30px 0px 0px 20px;

      &::before {
        position: absolute;
        right: 10px;
        color: #ffffff;
        font-size: 16px;
        content: "发布产品";
      }
    }
  }

  .leftsead_main_2 {
    width: 60px;
    position: relative;
    margin-right: 20px;

    &:hover {
      width: 120px;
      margin-right: 0px;
      border-radius: 30px 0px 0px 20px;

      &::before {
        position: absolute;
        right: 10px;
        color: #ffffff;
        font-size: 16px;
        content: "发布需求";
      }
    }
  }

  .leftsead_main_4 {
    width: 60px;
    position: relative;
    margin-right: 20px;

    &:hover {
      width: 120px;
      margin-right: 0px;
      border-radius: 30px 0px 0px 20px;

      &::before {
        position: absolute;
        right: 10px;
        color: #ffffff;
        font-size: 16px;
        content: "问题反馈";
      }
    }
  }

  .leftsead_main_3 {
    width: 60px;
    margin-right: 20px;
  }
}

#leftsead li {
  min-width: 60px;
  height: 60px;
  border-radius: 30px;
  text-align: center;
  line-height: 60px;
  background-color: #188af1;
  float: right;
  cursor: pointer;

  &:nth-child(2) {
    background-color: #188af1;
  }

  span {
    display: block;
    color: #ffffff;
    font-size: 16px;
    float: left;
    margin-left: 10px;
  }

  i {
    font-size: 16px;
    color: #ffffff;
    border-radius: 50%;
    float: left;
    margin-left: 17px;
  }

  .icon-shenqingguanli {
    font-size: 28px;
  }

  .icon-chanpin {
    font-size: 26px;
  }

  .icon-liuyan {
    font-size: 26px;
  }
}
</style>
